<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css"/>
		<script src="../plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<script type="text/html" id="col_bar">
		<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="back">退款</button>
		<button class="layui-btn layui-btn-sm" lay-event="detail"><a href="detial.html" style="color: #FFFFFF;">详细</a></button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
	</script>
	<script type="text/html" id="btn_bar">
		<button class="layui-btn layui-btn-xs" id="pay">待退款</button>
	</script>
	<div class="layui-form-item" style="margin-top: 10px;">
		<label class="layui-form-label">订单编号</label>
		<div class="layui-input-inline">
	      <input type="text" name="title"lay-verify="required" placeholder="输入产品名称" autocomplete="off" class="layui-input">
	    </div>
		<label class="layui-form-label">输入时间</label>
		<div class="layui-input-inline">
	      <input type="text" name="time" placeholder="请选择时间" class="layui-input" id="time">
	    </div>
	    <button type="research" class="layui-btn layui-btn-normal  layui-btn-radius"><i class="layui-icon">&#xe615;</i>搜索</button>
	</div>
	<div class="layui-form-item" style="margin: 10px;border: solid 1px #ccc;">
	  <button class="layui-btn layui-btn-normal" style="margin: 5px;"><i class="layui-icon">&#x1005;</i>已退款订单</button>
	  <button class="layui-btn layui-btn-warm"><i class="layui-icon">&#x1007;</i>未退款订单</button>
	</div>
	
	<table class="layui-table" lay-data="{
		height:400, 
		url:'../dataset/tab4.json', 
		page:true, 
		id:'test',
		toolbar:'#headbar'
		}" lay-filter="test">
	  <thead>
	    <tr>
	      <th lay-data="{field:'id', sort: true}">订单编号</th>
	      <th lay-data="{field:'time'}">退款时间</th>
	      <th lay-data="{field:'money'}">退款金额</th>
	      <th lay-data="{field:'count'}">退款数量</th>
	      <th lay-data="{field:'status', sort: true,toolbar:'#btn_bar'}">状态</th>
	      <th lay-data="{field:'reason'}">退款原因</th>
	      <th lay-data="{field:'option',toolbar:'#col_bar'}">操作</th>
	    </tr>
	  </thead>
	</table>
	</body>
	<script type="text/javascript">
		layui.use(["table","laydate"],function(){
			var tab = layui.table;
			var lay = layui.layer;
			var laydate = layui.laydate;
  
		  //执行一个laydate实例
		  laydate.render({
		    elem: '#time' //指定元素
		  });
		  
		  tab.on("tool(test)",function(obj){
		  		lay.msg(obj.event);
				if(obj.event === "back"){
					lay.confirm('确定退款吗?', {icon: 3, title:'提示'}, function(index){
						
					}); 
				}else if(obj.event === "delete"){
					lay.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
					  //do something
					  lay.close(index);
					  obj.del();//删除当前行
					  
					});
				}
			})
			
		})
	</script>
</html>
